<template>
      <SubTitle>
        <template #subtitle>成虫预警</template>
      </SubTitle>
  <div class="imago" ref="imago">
  </div>
</template>

<script>
import * as echarts from 'echarts'
import SubTitle from './SubTitle.vue';
export default {
  components:{
    SubTitle
  },
    mounted(){
        setTimeout(() => {
          let imago = echarts.init(this.$refs.imago);
        let xdata = [2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025];
        let data = [11,25,43,40,27,38,20,19,22,48,18,39,11];
        let option = {
          xAxis:{
            type:'category',
            data:xdata,
            axisLabel:{
              interval:1
            }
          },
          yAxis:{
            type:'value'
          },
          series:[
            {
              type:'line',
              data,
              smooth:true,
              lineStyle:{
                color:'rgba(56, 197, 122, 1)',
                width:3
              }
            }
          ]
        }
        imago.setOption(option);
        }, 1);
    }
}
</script>

<style lang="less" scoped>
    .title{
width: 100%;
        border-left: skyblue 0.5rem solid;padding-left: 0.5rem;
    }
  .imago{
    width: 100%;
    height: 290px;
  }
  @media screen and (max-width: 720px) {
    .imago{
      width: 100%;
      height: 300px;
    }
  }
</style>